@import "restyle";

$primary-border-color: set-color(black, dune);
$secondary-border-color: set-color(white, base);

/// Defines styles for the breadcrumb container
@include restyle-define(breadcrumbs, (
        restyle-var(primary-border-color): $primary-border-color,
        restyle-var(secondary-border-color): $secondary-border-color,
        background-color: transparent,
        list-style-type: none,
        overflow: hidden,
        padding: 0,
        margin: 5px 0,
        restyle-modifiers: (
                'with a border': (
                        border: 1px solid restyle-var(primary-border-color)
                )
        )
));

/// Defines styles for the anchor item in a breadcrumb
@include restyle-define(grain, (
        restyle-var(primary-border-color): $primary-border-color,
        restyle-var(secondary-border-color): $secondary-border-color,
        float: left,
        display: block,
        position: relative,
        padding: 10px 0 10px 45px,
        '&::before': (
                content: " ",
                display: block,
                width: 0,
                height: 0,
                border-top: 50px solid transparent,
                border-bottom: 50px solid transparent,
                border-left: 30px solid restyle-var(primary-border-color),
                position: absolute,
                top: 50%,
                margin-top: -50px,
                left: 100%,
        ),
        '&::after': (
                content: " ",
                display: block,
                width: 0,
                height: 0,
                border-top: 50px solid transparent,
                border-bottom: 50px solid transparent,
                border-left: 30px solid restyle-var(secondary-border-color),
                position: absolute,
                top: 50%,
                margin-top: -50px,
                left: 100%,
        )
))

.nacho-breadcrumbs {
  @include restyle(breadcrumbs);

  &__crumb {
    float: left;

    &__grain {
      @include restyle(grain);
    }

    &:first-child &__grain {
      padding-left: 0;
    }

    &:last-child &__grain {
      cursor: default;
      pointer-events: none;
      color: inherit;
      &::after, &::before {
        border: 0;
      }
    }
  }
}
